<template>
	<view class="products" :data-theme="theme">
		<view v-if="type == 'regist' && activityCategory == '2'" style="background-color: #fff9de;color: #764400;">
			<view style="padding: 20rpx 30rpx 30rpx 20rpx;">
				<view class="active_title" style="line-height: 1.4;">
					<text>活动规则：</text><text>满69减6、满159减12</text>
				</view>
				<view class="active_title" style="line-height: 1.4;">
					<text>补贴分摊规则：</text><text> 部分或高价值客户享受平台补贴，扣除平台补贴后，剩余由卖家承担</text><text
						style="color: royalblue;">详细规则</text>
				</view>
			</view>
		</view>
		<view v-if="type == 'regist'" style="background-color: #fff6f0;color: #ff650a;">
			<view style="padding: 20rpx 30rpx 30rpx 20rpx;">
				<view class="active_title" style="line-height: 1.4;">
					<text>则：</text><text>单次最多可提报100个商品，您可分多次提报!</text>
				</view>
			</view>
		</view>
		<view style="background-color: #fff;padding-bottom: 10rpx;">
			<view style="padding: 24rpx 24rpx;">
				<u-search v-model="keyword" @custom="searchProduct" @search="searchProduct" placeholder="请输入商品名称"
					actionText="搜索" :actionStyle="{color:'#000'}" shape="square" style="flex: none;"></u-search>
			</view>
		</view>
		<!-- 商品审核，筛选 -->
		<view style="background-color: #fff;">
			<view style="display: flex; justify-content: center;height: 40px;line-height: 40px;text-align: center;">

				<view style="flex: 1;justify-content: center;display: flex;"
					:style="{color:operatyGroupShow?bgColor:null}" @click="operatyGroupShow = true">
					<view style="font-size: 14px;margin-right: 6rpx;">{{radiovalue1?radiovalue1:"全部售卖区域"}}</view>
					<u-icon :name="operatyGroupShow?'arrow-up-fill':'arrow-down-fill'" size="10"
						:color="operatyGroupShow?bgColor:''"></u-icon>
				</view>

				<view style="flex: 1;justify-content: center;display: flex;">
					<view style="font-size: 14px;margin-right: 6rpx;">全部类目</view>
					<u-icon name="arrow-down-fill" size="10"></u-icon>
				</view>
			</view>
		</view>

		<scroll-view scroll-y="true" class="scroll-view print_center" style="height: 100%; overflow: hidden;">
			<!-- 循环下面 -->
			<item-product-page :bgColor="bgColor" ref="tab" :dataList="dataList"></item-product-page>
			<!-- <checkbox-group class="checke_list" v-model="checkboxValue" @change="checkboxGroup">
				<label class="uni-list-cell uni-list-cell-pd checke_item" v-for="(item, index) in dataList"
					:key="index">
					<view class="item_top">
						<checkbox :value="JSON.stringify(item)" :iconColor="bgColor" :checked="item.checked"
							class="round-checkbox" />
						<view class="item_img">
							<u--image :showLoading="true" :src="item.image" width="80px" height="80px"></u--image>
						</view>
						<view class="card_right item_right">
							<view class="card-name" style="display: flex;justify-content: space-between;">
								<text
									style="font-size: 31rpx;font-weight: bold;">[{{item.brandName}}]{{item.name}}</text>
							</view>
							<view style="margin: 20rpx 0;font-size: 28rpx;color: #828282;">
								{{item.operatyCity}}
							</view>
							<view class="content-list">
								<view style="display: flex;align-items: center;justify-content: space-between;">
									<view style="color: #000;">
										￥{{item.price}}
									</view>
									<view>
										<text style="color: #4b4b4b;margin-right: 10rpx;">剩余库存</text>{{item.stocks}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</label>
			</checkbox-group> -->
		</scroll-view>

		<!-- 内容为空 -->
		<u-empty class="empty" v-if="!dataList.length" mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		<!-- 上拉加载更多 -->
		<uni-load-more :status="loadMoreStatus"></uni-load-more>

		<view v-if="currentIndex == 0"
			style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;">
			<view style="display: flex;align-items: center;">
				<view class="checkAll" style="flex: 1;">
					<checkbox-group @change="onCheckAll">
						<label class="uni-list-cell uni-list-cell-pd" style="display: flex;line-height: 34rpx;">
							<view>
								<checkbox :value="isAllChecked.toString()" :checked="isAllChecked" />
							</view>
							<view>全选</view>
						</label>
					</checkbox-group>
				</view>
				<button v-if="activityCategory != '2'" @click="toAddSelect()" class="bg_color"
					style="border-radius: 16rpx;color: #FFF;font-weight: bold;font-size: 30rpx;padding:14rpx 20rpx;flex: 1;margin-left: 10rpx;"
					:color="bgColor">下一步,设置活动</button>
				<button v-if="activityCategory == '2'" @click="registActive()" :loading="loading" class="bg_color"
					style="border-radius: 16rpx;color: #FFF;font-weight: bold;font-size: 30rpx;padding:14rpx 20rpx;flex: 1;margin-left: 10rpx;"
					:color="bgColor">提交报名</button>
			</view>
		</view>

		<tui-drawer mode="bottom" :visible="operatyGroupShow" @close="close">
			<view class="u-demo-block2 ensure">
				<view class="title">
					<text @click="close" class="iconfont icon-guanbi5"></text>
					选择售卖区域
					<text @click="modeOfTransportComuleDate" class="iconfontRight">确认</text>
				</view>
				<view style="margin: 10px 0 10px 0">
					<radio-group v-model="radiovalue1" @change="radioChange">
						<label
							style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
							v-for="(item, index) in radioOperatyList" :key="index">
							<view>
								<radio :value="item.type" />
							</view>
							<view style="line-height: 19px;">{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
		</tui-drawer>
	</view>
</template>

<script>
	import {
		getProActivityAPi,addEnrolledProAPi
	} from "@/api/marketing.js";
	import itemProductPage from "./components/item-product-page.vue";
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	import {
		setThemeColor
	} from '@/utils/setTheme.js';
	let app = getApp();
	export default {
		components: {
			itemProductPage,
			tuiDrawer
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				type: '', //上层点击事件类型，regist立即报名跳转、
				keyword: '',
				loadMoreStatus: 'noMore',
				dataFrom:{
					activityId:'' //活动id
				},
				currentIndex: 0,
				// ----阅读合同-------
				isAllSelect: false,
				operatyGroupShow: false, //售卖区域展示
				radioOperatyList: [{
						name: '全部售卖区域',
						type: '0',
					},
					{
						name: '北京',
						type: '1',
					},
					{
						name: '天津',
						type: '2',
					},
					{
						name: '北京中B售卖域',
						type: '3',
					}
				],
				radiovalue1: null,
				timeTypesIndex: 0,
				dataList: [{
					image: 'http://192.168.1.29:28080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: '酱香',
					brandName: '鲁英',
					skuName: '1箱', //1:活动中，2未开始，3已结束
					operatyCity: '北京',
					price: 17.00,
					stocks: 560,
					checked: false,
					id: 1,
				}, {
					image: 'http://192.168.1.29:28080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: '酱香八宝4.5kg',
					brandName: '鲁英',
					skuName: '1箱', //1:活动中，2未开始，3已结束
					operatyCity: '北京',
					price: 19.35,
					stocks: 567,
					checked: false,
					id: 2,
				}, {
					image: 'http://192.168.1.29:28080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: '酱香八宝4.5kg',
					brandName: '鲁英',
					skuName: '1箱', //1:活动中，2未开始，3已结束
					operatyCity: '北京',
					price: 19.35,
					stocks: 567,
					checked: false,
					id: 3,
				}, {
					image: 'http://192.168.1.29:28080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: '酱香八宝4.5kg',
					brandName: '鲁英',
					skuName: '1箱', //1:活动中，2未开始，3已结束
					operatyCity: '北京',
					price: 19.35,
					stocks: 567,
					checked: false,
					id: 4,
				}, {
					image: 'http://192.168.1.29:28080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: '酱香八宝4.5kg',
					brandName: '鲁英',
					skuName: '1箱', //1:活动中，2未开始，3已结束
					operatyCity: '北京',
					price: 19.35,
					stocks: 567,
					checked: false,
					id: 5,
				}, {
					image: 'http://192.168.1.29:28080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: '酱香八宝4.5kg',
					brandName: '鲁英',
					skuName: '1箱', //1:活动中，2未开始，3已结束
					operatyCity: '北京',
					price: 19.35,
					stocks: 567,
					checked: false,
					id: 6,
				}],
				checkboxValue: [],
				isAllChecked: false,
				activeDateTime: "2024.05.01-2024.05.31",
				activityCategory:'',
				loading:false,
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			let that = this;
			that.type = options.type;
			console.log(options)
			that.dataFrom.activityId = options.id;
			that.activityCategory = options.activityCategory;
			this.getProList();
		},
		// 监听选中的数组
		watch: {
			checkboxValue(newVal, oldVal) {
				if (this.dataList.length == this.checkboxValue.length) {
					this.isAllChecked = true
				} else {
					this.isAllChecked = false
				}
			},
		},
		methods: {
			/** 获取商品列表 */
			getProList() {
				getProActivityAPi(this.dataFrom).then((res) => {
					console.log('proList', res);
					for(let ele of res.data.queryActivityProductVOList){
						ele.checked = false
					};
					this.dataList = res.data.queryActivityProductVOList;
				})
			},
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				};
				this.cancellForm.current++;
			},


			// checkboxGroup(ele) {
			// 	//-----------
			// 	let checkBoxValue = ele.detail.value
			// 	let checkBoxGroup = checkBoxValue.map((item) => JSON.parse(item));
			// 	for (let item of checkBoxGroup) {
			// 		item.checked = true;
			// 	};
			// 	this.checkboxValue = checkBoxGroup;
			// 	console.log('this.checkboxValue:',this.checkboxValue)
			// },

			// 全选框
			onCheckAll(val) {
				let that = this;
				let isAllCheck = val.detail.value.length > 0;
				if (isAllCheck) {
					this.checkboxValue = this.dataList.map((item) => JSON.stringify(item));
					for (let item of that.dataList) {
						item.checked = true;
					}
				} else {
					this.checkboxValue = [];
					for (let item of that.dataList) {
						item.checked = false;
					}
					console.log('that.dataList', that.dataList)
				}
			},
			/** 
			 *下一步，设置活动  */
			toAddSelect() {
				let that = this;
				let checkboxValue = this.$refs.tab.checkboxValue;
				let selectProductArray = checkboxValue.map(item => {
					return {
						brandName: item.brandName,
						productId: item.productId,
						productName: item.name,
						returnQuantity: item.cancelNumber,
						skuImage: item.image,
						skuName: item.specParam,
						...item,
					};
				}); // 提取出所有 checked 属性值为 true 的对象的 count 属性值

				if (!selectProductArray.length) {
					return uni.showToast({
						title: '请先选择商品',
						icon: 'error',
						duration: 2000 // 持续时间为 2 秒
					});
				}
				that.toSettingActivity(selectProductArray);//页面跳转

				// const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				// const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
				// uni.navigateBack({
				// 	delta: 1,
				// 	success: (res) => {
				// 		prevPage.$vm.otherFun(selectProductArray);
				// 	}
				// });
			},

			radioChange(n) {
				let that = this;
				let radioValue = n.detail.value;

				for (let i = 0; i < that.radioOperatyList.length; i++) {
					if (that.radioOperatyList[i].type == radioValue) {
						this.$set(this, 'radiovalue1', that.radioOperatyList[i].name)
					}
				}
				this.operatyGroupShow = false;
			},
			// 关闭弹窗事件
			close() {
				this.operatyGroupShow = false; //售卖区域弹窗
			},


			//下一步，设置活动
			toSettingActivity(item) {
				let that = this;
				let activityId = that.dataFrom.activityId;
				this.goPage(`/pages/marketing/settingUpActivity/settingUpActivity?activityId=${activityId}`, (res) => {
					// 通过eventChannel向被打开页面传送数据
					res.eventChannel.emit('productAttr', {
						data: item,
						// type: type,
						activeDateTime: this.activeDateTime,
						from: "saveProduct",
					})
				})
			},
			goPage(url, success) {
				uni.navigateTo({
					url,
					success: success
				})
			},
			/** 
			无需配置库存，提交报名
			 */
			registActive() {
				let that = this;
				let checkboxValue = this.$refs.tab.checkboxValue;
				that.loading = true;
				if (checkboxValue.length == 0) {
					uni.showToast({
						title: "请先选择商品",
						icon: "none",
					})
					return
				};
				
				// 重整属性名并删除不需要的属性
				let proData = checkboxValue.map(obj => {
					const {
						id,
						image,
						checked,
						inventory,
						merchantPercentage,
						salesVolume,
						...rest
					} = obj; //删除部分属性
					return {
						skuId:id,
						...rest
					}
				}); //要删除的数据的数组
				let id = that.dataFrom.activityId;
				addEnrolledProAPi(id,proData).then((res) => {
					that.loading = false;
					this.goPage(`/pages/marketing/setActive/setActive?data=` + JSON.stringify(checkboxValue))
				}).catch(err => {
					console.log("addEnrolledProAPi error", err)
					that.loading = false;
				});
			},
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	::v-deep .u-popup {
		flex: 0 !important;
	}

	.page {
		flex: 1;
	}

	/* #endif */
	.products {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		// background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.font-color {
		@include main_color(theme);
	}

	.main_color {
		@include main_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.swiper-page {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.pbm_100 {
		padding-bottom: 120rpx;
	}

	.pbm_20 {
		padding-bottom: 20rpx;
	}

	.iconfont {
		font-size: 34rpx;
		margin-right: 16rpx;
	}

	.read-contract-item {
		margin-left: 6rpx;
	}

	.print_center {
		// margin-top: 10px;
		// background-color: white;
		flex: 1;
		overflow: scroll;
	}

	.u-demo-block2 {
		height: 60vh;
		padding: 20rpx;
	}

	/** 弹窗 */
	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 30rpx;
			font-weight: bolder;
			color: #282828;
			text-align: center;
			margin: 12rpx 0 36rpx 0;
			position: relative;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #f0edf0;

			.iconfont {
				position: absolute;
				left: 30rpx;
				top: 0;
				font-size: 30rpx;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 0;
				// font-size: 36rpx;
				font-size: 30rpx;
				@include main_color(theme);
			}
		}

		.list {
			height: 750rpx;
			margin: 0 30rpx;
			overflow-x: hidden;
			overflow-y: auto;

			.item {
				margin-bottom: 52rpx;

				.pictrue {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					margin-right: 30rpx;

					/deep/image,
					.easy-loadimage,
					image,
					uni-image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.text {
					width: 618rpx;
					color: #999999;
					font-size: 28rpx;

					.name {
						color: #333333;
						font-weight: bold;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>